import React, { Component } from "react";
import styles from "../../style.less";

class index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      cvWidth: 400,
    };
  }
  componentDidMount() {
    {
      this.Canvasline();
    }
  }
  Canvasline = () => {
    var canvas = document.getElementById("line");
    var can = canvas.getContext("2d");
    can.lineWidth = 2;
    can.strokeStyle = "rgb(67, 83, 114)";
    can.beginPath();
    can.moveTo(0, 10);
    can.lineTo(20, 10);
    can.stroke();
    can.beginPath();
    can.moveTo(20, 10);
    can.lineTo(70, 30);
    can.stroke();
    can.beginPath();
    can.moveTo(70, 30);
    can.lineTo(300, 30);
    can.stroke();
    can.beginPath();
    can.moveTo(300, 30);
    can.lineTo(350, 10);
    can.stroke();
    can.beginPath();
    can.moveTo(350, 10);
    can.lineTo(375, 10);
    can.stroke();
    // can.beginPath();
    // can.moveTo(600, 1);
    // can.lineTo(700, 1);
    // can.stroke();
  };
  render() {
    let { windowWidth } = this.props;
    return (
      <div >
        <canvas
          id="line"
          width="370px"
          height="35"
          className={styles.canstyle}
        ></canvas>
      </div>
    );
  }
}

export default index;
